<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Beehive</title>
<!--    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <style>
        body {
            margin: 0 10px;
        }


        /* 表格头 */
        .layui-table th {
            font-weight: bold;
            font-family: "monospace", 宋体;
        }

        /*layui单元格*/
        tbody .layui-table-cell {
            height: 40px;
            line-height: 40px;
            color: #888888;
        }
    </style>
</head>
<body>

<!-- 面包屑导航 -->
<span class="layui-breadcrumb">
    <blockquote class="layui-elem-quote">
        <a th:href="@{/admin}" target="_parent">首页</a>
        <a href="#" target="_self">用户管理</a>
        <a><cite>用户列表</cite></a>
    </blockquote>
</span>

<form class="layui-form">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md3">
            <input type="text" name="keyword" id="keyword" placeholder="请输入用户名或姓名" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-col-md3">
            <select name="gender" id="gender">
                <option value="">按性别搜索</option>
                <option value="0">女</option>
                <option value="1">男</option>
            </select>
        </div>
        <div class="layui-col-md3">
            <input type="text" class="layui-input" id="dateRange" placeholder="请选择注册时间">
        </div>
        <div class="layui-col-md3">
            <div class="layui-row">
                <div class="layui-btn" id="searchBtn">搜索</div>
                <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
            </div>
        </div>
    </div>
</form>


<!-- layui数据表格 -->
<table class="layui-hide" id="userList" lay-filter="userTable"></table>

<!-- 工具头 -->
<script type="text/html" id="headerBar">
    <a class="layui-btn layui-btn-sm" lay-event="refresh">
        <i class="layui-icon layui-icon-refresh"></i>
    </a>
</script>

<!-- 工具行 -->
<script type="text/html" id="userListBar">
<!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">修改</a>
    <!-- valid为1表示正常 -->
    {{#  if(d.valid == 1) { }}
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="del">禁用</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="act">启用</a>
    {{#  } }}

</script>

<!-- layuiTpl 语法（类似JSP），也可以使用函数 -->
<script type="text/html" id="genderTpl">
    {{#  if(d.gender == 1) { }}
    <i class="layui-icon layui-icon-male" style="color: #a5dee5"></i>
    {{#  } else { }}
    <i class="layui-icon layui-icon-female" style="color: #ffcfdf"></i>
    {{#  } }}
</script>

<!-- 用户状态 -->
<script type="text/html" id="validTpl">
    {{#  if(d.valid == 1) { }}
    <button class="layui-btn layui-btn-sm layui-btn-radius" style="background-color: #a8e6cf" disabled>已启用</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" style="background-color: #ff9999" disabled>已禁用</button>
    {{#  } }}
</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/userlist.js}"></script>
</body>
</html>
